<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>滑稽作业</title>
		
	</head>
	<style>
		.d5{
			width: 350px;
			height: 350px;
			background-color: #ffa500;
			border-radius: 180px;
			z-index: 1;
		}
		.d6{
			width: 100px;
			height:100px;
			background-color: #ffc0cb;
			border-radius: 180px;
			z-index: 2;
			position: relative;
			left: 20px;
			top: -204px;




			
		}
		.d7{
			width: 100px;
			height:100px;
			background-color: #ffc0cb;
			border-radius: 180px;
			z-index: 2;
			position: relative;
			left: 222px;
			top: -310px;




		}
		.d8{
			width: 20px;
			height:20px;
			background-color: #000000;
			border-radius: 180px;
			z-index: 4;
			position: relative;
			left: 48px;
			top: -446px;


		}
		.d9{
			width: 20px;
			height:20px;
			background-color: #000000;
			border-radius: 180px;
			z-index: 4;
			position: relative;
			left: 205px;
			top: -679px;


		}
		.d10{
			
				width: 200px;
				height: 200px;
				border-top: 10px solid black;
				border-left: 10px   solid black;
				border-radius: 50%;
				transform: rotate(220deg);
				position: relative;
				left: 67px;
				top: -455px;



		}
		.p1{
			width: 20px;
			height: 100px;
			background-color: #ffffff;
			z-index: 3;
			position: relative;
			left: 245px;
			top: -755px;
			
			transform: rotate(90deg);
			border-radius: 15px;

			transform: rotate(90deg);
			
			border-radius: 15px;
		}
		.p2{
			width: 20px;
			height: 100px;
			background-color: #ffffff;
			z-index: 3;
			position: relative;
			left: 88px;
			top: -868px;


			transform: rotate(90deg);
			border-radius: 15px;
			
		}
		
	</style>
	<body>
		<div class="d5"></div>
			<div class="d6"></div>
				<div class="d7"></div>
					<div class="d8"></div>
						<div class="d10"></div>
						<div class="d9"></div>
						
					
		<p class="p1"></p>
		<p class="p2"></p>
	</body>
</html>